<template>
	<view style="height: 100vh" :class="nightStatus? 'nightTheme':''">
		<page-title :Theme="nightStatus? 'nightTheme':'bg-white'">音乐详情</page-title>
		<!--歌曲信息-->
		<view class="flex flex-column align-center justify-center py-1">
			<view>
				<text class="font">歌曲：</text>
				<text class="font-weight-bold">{{audioName}}</text>
			</view>
			<view>
				<text class="font">歌手：</text>
				<text class="font-weight-bold">{{singerName}}</text>
			</view>
		</view>
		<!-- 歌曲图片 -->
		<view class="flex align-center justify-center" style="height: 400rpx; margin: 20rpx 50rpx">
			<image :src="curCover" lazy-load mode="aspectFill"
				style="height: 400rpx;border-radius: 35rpx;box-shadow: 0 2rpx 6rpx 0;"></image>
		</view>

		<!--进度部分-->
		<view class="flex align-center justify-center font" style="color: #7a8388; height: 65rpx;">
			<!--总时长-->
			<view>{{format(durationTime)}}</view>
			<!--进度条部分-->
			<view style="width: 500rpx;">
				<slider @change="SlideToPlay" @changing="SlideToPlay" block-size="16" activeColor="#e48267"
					backgroundColor="#eef2f3" :max="durationTime || 100" :value="currentTime" />
			</view>
			<!--播放时刻-->
			<view>{{format(currentTime)}}</view>
		</view>

		<!-- 按钮部分 -->
		<view>
			<view class="flex align-center justify-center" style="padding-top: 20rpx;">
				<view class="mr-3" @tap="PreOrNext('pre')">
					<iconfont iconId="icon-shangyixiang" iconSize="85"></iconfont>
				</view>
				<view class="mx-5" @tap="PlayOrPause">
					<iconfont :iconId="playStatus? 'icon-zanting':'icon-bofang1'" iconSize="80"></iconfont>
				</view>
				<view class="ml-2" @tap="PreOrNext('next')">
					<iconfont iconId="icon-xiayixiang" iconSize="85"></iconfont>
				</view>
			</view>

			<view class="flex align-center justify-center font" :class="nightStatus?'':'text-light-black'" style="padding-top: 20rpx;">
				<view class="flex flex-column align-center" @tap="chageStatus('listStatus')">
					<iconfont :iconId="listStatus? 'icon-liebiao': 'icon-icon--'" iconSize="60"></iconfont>
					<text class="pt-1">播放列表</text>
				</view>
				<view class="flex flex-column align-center" style="padding: 0 80rpx;" @tap="chageStatus('collectStatus')">
					<iconfont :iconId="collectStatus?'icon-xihuan2':'icon-aixinfengxian'" iconSize="60"></iconfont>
					<text class="pt-1">收藏</text>
				</view>
				<view class="flex flex-column align-center" @tap="chageStatus('nightStatus')">
					<iconfont :iconId="nightStatus?'icon-yueliang':'icon-yejianmoshi'" iconSize="60"></iconfont>
					<text class="pt-1">夜间模式</text>
				</view>
			</view>
		</view>

		<!--歌手具体信息-->
		<view v-show="!listStatus" class="fixed-bottom shadow p-2 animated fadeInUp"
			style="height: 300rpx;border-radius: 30rpx; z-index: 0;">
			<view class="flex justify-between">
				<view>
					<view>
						<text class="font">歌曲:</text>
						<text class="font-weight-bold">{{audioName}}</text>
					</view>
					<view>
						<text class="font">歌手:</text>
						<text class="font-weight-bold">{{singerName}}</text>
					</view>
				</view>
				<iconfont iconId="icon-jieshao" iconSize="65" @iconclick="showSingerSynopsis"></iconfont>
			</view>

			<view>
				<view class="font-md pt-2">歌手简介:</view>
				<view class="text-ellipsis w-100">
					{{singerSynopsis}}
				</view>
			</view>
		</view>

		<!-- 播放列表部分 -->
		<view v-show="listStatus" class="fixed-bottom shadow p-2 animated fadeInUp" style="height: 300rpx;border-radius: 30rpx;">
			<view class="font-weight-bold font-md" style="height: 50rpx;">列表选择</view>
			<scroll-view scroll-y style="height: 350rpx;">
				<block v-for="(item, index) in audioList" :key="item.id">
					<view class="flex align-center font px-2" style="height: 85rpx;" hover-class="bg-light" @tap="selectPlay(item.id)">
						<text class="flex-1 text-ellipsis">{{item.audioName}}</text>
						<text class="flex-1 text-ellipsis">{{item.singerName}}</text>
						<view class="flex-1 ml-3 flex align-center">
							<block v-if="item.playStatus">
							<text class="mr-2">{{item.playStatus === 1? '播放中': '播放'}}</text>
							<iconfont :iconId="item.playStatus === 1? 'icon-bofangzhong2': 'icon-bofangsanjiaoxing'" iconSize="40"></iconfont>	
							</block>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		
		<!-- 歌手简介详情 -->
		<uni-popup ref="popup">
			<view class="px-2 shadow" style="width: 600rpx;height: 850rpx;border-radius: 40rpx;" :class="nightStatus?'nightTheme':'bg-white'">
				<text class="font">{{singerSynopsis}}</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import pageTitle from '@/components/pageTitle.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import $U from '@/common/unit.js';
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';

	export default {
		data() {
			return {
				listStatus: false,
				collectStatus: false,
				nightStatus: false
			}
		},
		computed: {
			...mapState({
				playStatus: ({
					audio
				}) => audio.playStatus,
				durationTime: ({
					audio
				}) => audio.durationTime,
				currentTime: ({
					audio
				}) => audio.currentTime,
				audioList: ({
					audio
				}) => audio.audioList
			}),
			...mapGetters([
				'audioName',
				'singerName',
				'singerSynopsis',
				'curCover'
			])
		},
		components: {
			pageTitle,
			uniPopup
		},
		methods: {
			...mapActions(['init', 'PlayOrPause', 'PreOrNext', 'SlideToPlay', 'selectPlay']),
			format(time) {
				if (!time) {
					return '00:00';
				}
				return $U.formatTime(time);
			},
			chageStatus(status) {
				this[status] = !this[status];
			},
			showSingerSynopsis(){
				this.$refs.popup.open();
			}
		},
		mounted() {
			this.init()
		},
		destroyed() {
			this.destruction()
		}
	}
</script>

<style>

</style>
